<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="下架单管理">
        <IContent :spin-show="loading">
            <ISearch v-model="search">
                <FormItem label="仓单号">
                    <Input size="small" v-model="search.code"></Input>
                </FormItem>
                <FormItem :label-width="1">
                    <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                </FormItem>
            </ISearch>
            <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
                <template slot-scope="{ row, index }" slot="code">
                    <span>{{row.order.code}}</span>
                </template>
            </ITable>
        </IContent>
        <div slot="footer">
            <Button type="info" icon="ios-add" @click="printForOrder">按货位打印</Button>
            <Button type="primary" icon="ios-add" @click="printForLocation">按订单打印</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentListPage from "../../../mixins/contentListPage";

    export default {
        name: "IIView",
        mixins: [contentDrawer, contentListPage],
        components: {ISearch, IContent, RemoteSelect, IForm, IDrawer, ITable},
        data() {
            return {
                loading: false,
                search: {},
                table: {
                    columns: [{
                        title: '仓单号',
                        slot: 'code'
                    },{
                        title: '货架号',
                        key: 'barcode'
                    },{
                        title: '条码',
                        key: 'barcode'
                    },{
                        title: '数量',
                        key: 'quantity'
                    }],
                },
            }
        },
        methods: {
            getLists(page){
                this.loading = true;
                this.$http.get(`order/picking/${this.props.id}`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            printForOrder(){
                this.loading = true;
                this.$http.get(`order/picking/${this.props.id}/order`).then((data) => {
                    window.open(data.url);
                }).finally(() => {
                    this.loading = false;
                });
            },
            printForLocation(){
                this.loading = true;
                this.$http.get(`order/picking/${this.props.id}/location`).then((data) => {
                    window.open(data.url);
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
